/**
* Created by yyr on 2018/3/15
*已投资基金编辑选项卡基金详细》管理层
*/
<template>
    <div>
        <div class="ca-p-22 ca-box ca-m-t-15">
            <el-row>
                <el-col :span="12" class="ca-title">
                    <h3>管理层</h3>
                </el-col>
                <el-col :span='12' class="ca-align-right" v-if="!isAdd">
                    <div>
                        <el-button type="primary" @click="saveManage()" size="medium">保存</el-button>
                        <el-button  @click="cancel()" size="medium">取消</el-button>
                    </div>
                </el-col>
            </el-row>
            <table class="ca-table ca-m-t-15">
                <tr>
                    <th width="13%">高管姓名</th>
                    <th width="10%">性别</th>
                    <th width="10%">职位</th>
                    <th width="15%">电话</th>
                    <th width="15%">邮箱</th>
                    <th width="13%">传真</th>
                    <th width="14%">备注</th>
                    <th width="10%" class="p-tb-0"><button type="button" @click='addManageSingle' class="ca-btn ca-btn-round"><i class="fa fa-plus"></i></button></th>
                </tr>
                <tr v-for="(item,index) in fundStratumList">
                    <td>
                        <el-input v-model="item.userName"></el-input>
                    </td>
                    <td>
                        <el-select v-model="item.sex" placeholder="请选择" style="width: 100%">
                            <el-option
                                v-for="item in initView.sex"
                                :label="item.name"
                                :key="item.id"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-input placeholder="请输入内容" v-model="item.position" class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input   placeholder="请输入内容" v-model="item.tel" class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input  placeholder="请输入内容" v-model="item.mailbox" class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input  placeholder="请输入内容" v-model="item.fax" class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input  placeholder="请输入内容" v-model="item.remarks" :maxlength="1000"></el-input>
                    </td>
                    <td class="p-tb-0">
                        <button type="button" @click='deleteSingleManage(item,index)' class="ca-btn ca-btn-round"><i class="fa fa-remove"></i></button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                itemId: this.$route.params.fundId,
                fundStratumList: [
                    {
                        fax: '', //传真
                        fundId: this.$route.params.fundId, //
                        id: '',
                        mailbox: '', //邮箱
                        position: '', //职位
                        remarks: '', //备注
                        sex: null, //性别
                        tel: '', //电话
                        userName: '', //高管姓名 必填
                    }
                ],
                initView: {
                    sex: this.$store.state.csConst.SEX,
                }
            }
        },
        props: {
            isAdd: {
                type: Boolean,
                default() {
                    return false;
                }
            },
        },
        created() {
            if (!this.isAdd) {
                this.getManagementList();
            }
        },
        watch: {
            fundStratumList: {
                handler: function (fundStratumList) {
                    this.$emit('fundStratumList', fundStratumList);
                },
                deep: true
            },
        },
        methods: {
            getManagementList() {
                apiHttp(api.GET_MANAGEMENT,{fundId: this.itemId}).then( ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundStratumList = ret.data;
                    }
                })
            },
            saveManage() {
                let telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                let mailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                let faxReg = /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
                 this.fundStratumList.every(item =>{
                    if (item.userName === '') {
                        this.$message.error('姓名不能为空!');
                        return false;
                    } else if (item.tel && !telReg.test(item.tel)) {
                        this.$message.error('请输入正确的手机号码!');
                        return false;
                    } else if (item.mailbox && !mailReg.test(item.mailbox)) {
                        this.$message.error('请输入正确的邮箱!');
                        return false;
                    } else if (item.fax && !faxReg.test(item.fax)) {
                        this.$message.error('请输入正确的传真号码!');
                        return false;
                    } else {
                        this.save();
                    }
                })
            },
            //保存接口
            save() {
                apiHttp(api.MANAGE_PERSON,this.fundStratumList).then( ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!',
                            center: true
                        });
                        this.cancel();
                        this.$emit('addRedDot')
                    }
                })
            },
            cancel() {
                this.$emit('isEdit',false)
            },
            //添加一行
            addManageSingle() {
                this.fundStratumList.push(Object.assign({},{
                    fax: '',
                    fundId: this.itemId,
                    id: '',
                    mailbox: '',
                    position: '',
                    remarks: '',
                    sex: null,
                    tel: '',
                    userName: '',
                }))
            },
            //删除一行
            deleteSingleManage(item,index) {
                this.$confirm('是否删除？', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    //删除管理层一行
                    if (!item.id) {
                        //直接截取
                        this.fundStratumList.splice(index,1)
                    } else {
                        //调用删除一行管理层的接口
                        apiHttp(api.DELETE_MANEGE_PERSON,{id: item.id}).then( ret=> {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!',
                                    center: true
                                });
                                this.cancel();
                            }
                        })
                    }
                })
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
table td{
    padding: 5px;
    box-sizing: border-box;
}
</style>
